<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-row>
        <el-form-item label="产品" prop="productId">
          <el-select
            v-model="queryParams.productId"
            clearable
            filterable
            placeholder="请选择产品"
            class="!w-160px"
          >
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入库时间" prop="inTime">
          <el-date-picker
            v-model="queryParams.inTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-200px"
          />
        </el-form-item>
        <el-form-item label="供应商" prop="supplierId">
          <el-select
            v-model="queryParams.supplierId"
            clearable
            filterable
            placeholder="请选择供供应商"
            class="!w-120px"
          >
            <el-option
              v-for="item in supplierList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库" prop="warehouseId">
          <el-select
            v-model="queryParams.warehouseId"
            clearable
            filterable
            placeholder="请选择仓库"
            class="!w-120px"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>

      </el-row>


      <el-row style="margin-top: 20px">
        <el-col :span="12">
          <el-button
            type="success"
            plain
            @click="getListByPayStatus(2)"
          >已付款
          </el-button>
          <el-button
            type="danger"
            plain
            @click="getListByPayStatus(0)"
          >未付款
          </el-button>

          <el-button
            type="success"
            plain
            @click="getListByAuditStatus(20)"
          >已审核
          </el-button>
          <el-button
            type="danger"
            plain
            @click="getListByAuditStatus(10)"
          >未审核
          </el-button>
        </el-col>

        <el-col :span="6">
          <el-button
            type="primary"
            plain
            @click="openForm('create')"
            v-hasPermi="['erp:purchase-in:create']"
          >
            <Icon icon="ep:plus" class="mr-5px"/>
            新增
          </el-button>
          <el-button
            type="success"
            plain
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['erp:purchase-in:export']"
          >
            <Icon icon="ep:download" class="mr-5px"/>
            导出
          </el-button>
          <el-button
            type="danger"
            plain
            @click="handleDelete(selectionList.map((item) => item.id))"
            v-hasPermi="['erp:purchase-in:delete']"
            :disabled="selectionList.length === 0"
          >
            <Icon icon="ep:delete" class="mr-5px"/>
            删除
          </el-button>
        </el-col>
      </el-row>


    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table
      border
      v-loading="loading"
      :data="list"
      :stripe="true"
      :show-overflow-tooltip="true"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="操作" width="60" fixed="left" align="center" prop="payStatus">
        <template #default="scope">
          <el-popover :visible="popoverVisible == scope.row.id" placement="top" :width="100">

            <el-row class="mb-8px">
              <el-col :span="24">
                <el-button
                  link
                  @click="openForm('detail', scope.row.id)"
                  v-hasPermi="['erp:purchase-order:query']"
                >
                  详情
                </el-button>
              </el-col>
            </el-row>

            <el-row class="mb-8px">
              <el-col :span="24">
                <el-button
                  link
                  type="primary"
                  @click="openForm('update', scope.row.id)"
                  v-hasPermi="['erp:purchase-order:update']"
                  :disabled="scope.row.status === 20"
                >
                  编辑
                </el-button>
              </el-col>
            </el-row>

            <el-row class="mb-8px"  v-if="scope.row.status === 10">
              <el-col :span="24">
                <el-button
                  link
                  type="primary"
                  @click="handleUpdateStatus(scope.row.id, 20)"
                  v-hasPermi="['erp:purchase-order:update-status']"
                >
                  审批
                </el-button>
              </el-col>
            </el-row>

            <el-row class="mb-8px"   v-else>
              <el-col :span="24">
                <el-button
                  link
                  type="danger"
                  @click="handleUpdateStatus(scope.row.id, 10)"
                  v-hasPermi="['erp:purchase-order:update-status']"
                >
                  反审批
                </el-button>
              </el-col>
            </el-row>

            <el-row class="mb-8px">
              <el-col :span="24">
                <el-button
                  link
                  type="danger"
                  @click="handleDelete([scope.row.id])"
                  v-hasPermi="['erp:purchase-order:delete']"
                >
                  删除
                </el-button>
              </el-col>
            </el-row>

            <div class="popoverCloseBtn" @click="closePopover()">关闭</div>
            <template #reference>
              <img src="@/assets/imgs/more_edit.png" @contextmenu.prevent="handleRightClick(scope.row.id)"    @click="openForm('update', scope.row.id)"  class="linkBtn"/>
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column min-width="180" label="入库单号" align="center" prop="no"/>
      <el-table-column label="产品名称" prop="productNames" min-width="300">
        <template #default="scope">
          <dev
            v-for="(item, index) in scope.row.items"
            :key="index"
            style="margin-right: 5px;display: block;vertical-align: middle;line-height: 20px;margin-bottom: 10px;"
          >
<!--            【{{ item.brandName }}】{{ item.productName }}{{ item.businessTypeName }}-->
            <span v-if="item.brandName != null && item.brandName.length>0">
              【{{ item.brandName }}】
            </span>
            {{ item.productName }}
            <span v-if="item.businessTypeName != null && item.businessTypeName.length>0">
              {{ item.businessTypeName }}
            </span>
          </dev>
        </template>
      </el-table-column>
      <el-table-column label="供应商" align="center" prop="supplierName"/>
      <el-table-column
        label="入库时间"
        align="center"
        prop="inTime"
        :formatter="dateFormatter2"
        width="120px"
      />
      <el-table-column label="创建人" align="center" prop="creatorName"/>
      <el-table-column
        label="总数量"
        align="center"
        prop="totalCount"
        :formatter="erpCountTableColumnFormatter"
      />
      <el-table-column
        label="应付金额"
        align="center"
        prop="totalPrice"
        :formatter="erpPriceTableColumnFormatter"
      />
      <el-table-column
        label="已付金额"
        align="center"
        prop="paymentPrice"
        :formatter="erpPriceTableColumnFormatter"
      />
      <el-table-column label="未付金额" align="center">
        <template #default="scope">
          <span v-if="scope.row.paymentPrice === scope.row.totalPrice">0</span>
          <el-tag type="danger" v-else>
            {{ erpPriceInputFormatter(scope.row.totalPrice - scope.row.paymentPrice) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" fixed="right" width="90" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.ERP_AUDIT_STATUS" :value="scope.row.status"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="操作" align="center" fixed="right" width="220">-->
<!--        <template #default="scope">-->
<!--          <el-button-->
<!--            link-->
<!--            @click="openForm('detail', scope.row.id)"-->
<!--            v-hasPermi="['erp:purchase-in:query']"-->
<!--          >-->
<!--            详情-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            link-->
<!--            type="primary"-->
<!--            @click="openForm('update', scope.row.id)"-->
<!--            v-hasPermi="['erp:purchase-in:update']"-->
<!--          >-->
<!--&lt;!&ndash;            :disabled="scope.row.status === 20"&ndash;&gt;-->
<!--            编辑-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            link-->
<!--            type="primary"-->
<!--            @click="handleUpdateStatus(scope.row.id, 20)"-->
<!--            v-hasPermi="['erp:purchase-in:update-status']"-->
<!--            v-if="scope.row.status === 10"-->
<!--          >-->
<!--            审批-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            link-->
<!--            type="danger"-->
<!--            @click="handleUpdateStatus(scope.row.id, 10)"-->
<!--            v-hasPermi="['erp:purchase-in:update-status']"-->
<!--            v-else-->
<!--          >-->
<!--            反审批-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            link-->
<!--            type="danger"-->
<!--            @click="handleDelete([scope.row.id])"-->
<!--            v-hasPermi="['erp:purchase-in:delete']"-->
<!--          >-->
<!--            删除-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <PurchaseInForm ref="formRef" @success="getList"/>
</template>

<script setup lang="ts">
import {getIntDictOptions, DICT_TYPE} from '@/utils/dict'
import {FinancePaymentApi, FinancePaymentVO} from '@/api/erp/finance/payment'
import {dateFormatter2} from '@/utils/formatTime'
import download from '@/utils/download'
import {PurchaseInApi, PurchaseInVO} from '@/api/erp/purchase/in'
import PurchaseInForm from './PurchaseInForm.vue'
import {ProductApi, ProductVO} from '@/api/erp/product/product'
import {UserVO} from '@/api/system/user'
import * as UserApi from '@/api/system/user'
import {
  erpCountTableColumnFormatter,
  erpPriceInputFormatter,
  erpPriceTableColumnFormatter
} from '@/utils'
import {WarehouseApi, WarehouseVO} from '@/api/erp/stock/warehouse'
import {AccountApi, AccountVO} from '@/api/erp/finance/account'
import {SupplierApi, SupplierVO} from '@/api/erp/purchase/supplier'
import {ErpBizType} from "@/utils/constants";
import {ElLoading} from "element-plus";

/** ERP 销售入库列表 */
defineOptions({name: 'ErpPurchaseIn'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<PurchaseInVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  no: undefined,
  ids:[],
  supplierId: undefined,
  productId: undefined,
  warehouseId: undefined,
  inTime: [],
  orderNo: undefined,
  paymentStatus: undefined,
  accountId: undefined,
  status: undefined,
  remark: undefined,
  creator: undefined
})

const popoverVisible = ref();

const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const productList = ref<ProductVO[]>([]) // 产品列表
const supplierList = ref<SupplierVO[]>([]) // 供应商列表
const userList = ref<UserVO[]>([]) // 用户列表
const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
const accountList = ref<AccountVO[]>([]) // 账户列表

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await PurchaseInApi.getPurchaseInPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}


const getListByAuditStatus = async (status: number) => {
  queryParams.status = status
  await getList()
}
const getListByPayStatus = async (status: number) => {
  queryParams.paymentStatus = status;
  await getList()
}


/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.status = undefined;
  queryParams.paymentStatus = undefined;
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {

  //加载中
  const loading = ElLoading.service({
    lock: true,
    text: '查询中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  try {
    formRef.value.open(type, id)
    popoverVisible.value = null;
  }finally {
    loading.close()
  }
}


const openPopoverVisible = async (id) => {
  popoverVisible.value = id;
}
const closePopover = async () => {
  popoverVisible.value = null;
}
const handleRightClick = (id) => {
  popoverVisible.value = id;
};


/** 删除按钮操作 */
const handleDelete = async (ids: number[]) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await PurchaseInApi.deletePurchaseIn(ids)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
    selectionList.value = selectionList.value.filter((item) => !ids.includes(item.id))
  } catch {
  }
}

// const loadingHandle = ElLoading.service({
//   lock: true,
//   text: '处理中...',
//   background: 'rgba(0, 0, 0, 0.7)',
// })

/** 审批/反审批操作 */
const handleUpdateStatus = async (id: number, status: number) => {

  // 审批的二次确认
  await message.confirm(`确定${status === 20 ? '审批' : '反审批'}该入库吗？`);

  loading.value = true;

  try {
    // 发起审批
    await PurchaseInApi.updatePurchaseInStatus(id, status)
    if (status === 20) {
      /**
       *
       * 优化到后端处理
       *
       * 3.1查询采购入库单
       */
      // let purchaseInInfo = await PurchaseInApi.getPurchaseIn(id);

      /**
       * 3.2封装付款单
       */
      // const paymentFormData = {
      //   supplierId: purchaseInInfo.supplierId,
      //   accountId: purchaseInInfo.accountId,
      //   financeUserId: undefined,
      //   paymentTime: undefined,
      //   remark: undefined,
      //   fileUrl: '',
      //   totalPrice: purchaseInInfo.totalProductPrice,
      //   discountPrice: 0,
      //   paymentPrice: purchaseInInfo.totalProductPrice,
      //   items: [],
      //   no: undefined // 订单单号，后端返回
      // }
      // paymentFormData.items.push({
      //   bizId: purchaseInInfo.id,
      //   bizType: ErpBizType.PURCHASE_IN,
      //   bizNo: purchaseInInfo.no,
      //   totalPrice: purchaseInInfo.totalProductPrice,
      //   paidPrice: 0,
      //   paymentPrice: purchaseInInfo.totalProductPrice
      // })

      /**
       * 3.3创建付款单
       */
      // await FinancePaymentApi.createFinancePayment(paymentFormData)
    }
    message.success(`${status === 20 ? '审批' : '反审批'}成功`)

    // 刷新列表
    await getList();

  } catch {
  } finally {
    loading.value = false;
  }
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await PurchaseInApi.exportPurchaseIn(queryParams)
    download.excel(data, '销售入库.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 选中操作 */
const selectionList = ref<PurchaseInVO[]>([])
const handleSelectionChange = (rows: PurchaseInVO[]) => {
  selectionList.value = rows
}

/** 初始化 **/
onMounted(async () => {


  let query = route.query;
  if (query.doType == 'query') {
    queryParams.ids = query.data;
  }
  handleQuery();

  // 加载产品、仓库列表、供应商
  productList.value = await ProductApi.getProductSimpleList()
  supplierList.value = await SupplierApi.getSupplierSimpleList()
  userList.value = await UserApi.getSimpleUserList()
  warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
  accountList.value = await AccountApi.getAccountSimpleList()
})

const route = useRoute();
onActivated(() => {

  let query = route.query;
  if (query.doType == 'query') {
    queryParams.ids = query.data;
  }
  popoverVisible.value = null;
  getList()
});
// TODO eGlass：可优化功能：列表界面，支持导入
// TODO eGlass：可优化功能：详情界面，支持打印
</script>
